<template>
    <div class="countrymoney-container">
        <div class="choose-item" v-for="(item, index) in modelValue" :key="item.country">
            <el-form-item label="保證金">
                <el-input v-model="item.money" placeholder="請輸入保證金" />
            </el-form-item>
            <el-form-item label="國別" class="country-select">
                <el-select v-model="item.country" placeholder="請選擇國別">
                    <el-option :label="subItem.label" :value="subItem.value" v-for="subItem in countryListUI"
                        :key="subItem.value" />
                </el-select>
            </el-form-item>
            <div class="sub-button" @click="subItem" v-show="index === modelValue.length - 1 && modelValue.length > 1">
                -
            </div>
        </div>
        <div class="add-wrap" v-show="addButtonVisible">
            <div class="add-button" @click="addItem">
                +
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    /**
     * item: {label,value}
     */
    countryListUI: {
        type: Array,
        default: () => []
    },
    /**
     * item: {country,money}
     */
    modelValue: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['update:modelValue']);
const addButtonVisible = computed(() => {
    return props.countryListUI.length > 0
});

const addItem = () => {
    emit('update:modelValue', [...props.modelValue, { money: '', country: props.countryListUI[0]?.value }]);
}
const subItem = () => {
    // 移除最後一項
    emit('update:modelValue', [...props.modelValue.slice(0, -1)]);
}

</script>

<style scoped lang="scss">
.countrymoney-container {
    width: 100%;

    :deep(.choose-item) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
        position: relative;
        .country-select {
            margin-right: 8vw;
        }
    }

    .add-wrap {
        display: flex;
        justify-content: center;
        font-size: 32px;

        .add-button {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: #2FC2AF;
            color: #fff;
            cursor: pointer;
            margin-top: 20px;
            margin-right: 100px;
        }
    }

    .sub-button {
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #2FC2AF;
        color: #fff;
        cursor: pointer;
        margin-top: 20px;
        margin-right: 100px;
        font-size: 32px;
        position: absolute;
        right: 0;
        top: -20px;
    }
}
</style>